// 商户中心>运营商
import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Table, Avatar } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { getOperatorList } from '@/services/supplier/operator'
import { router } from 'umi'

// 表头
const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center'
    },
    {
        title: '编号',
        dataIndex: 'id',
        key: 'id',
        align: 'center'
    },
    {
        title: '运营商名称',
        dataIndex: 'operatorName',
        key: 'operatorName',
        align: 'center'
    },
    {
        title: '运营商LOGO',
        dataIndex: 'logo',
        key: 'logo',
        align: 'center',
        render: logo => <Avatar shape="square" size="large" src={logo} />
    },
    {
        title: '地址',
        dataIndex: 'address',
        key: 'address',
        align: 'center'
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        align: 'center'
    }
]

const Operator = props => {
    const { form } = props
    const { getFieldDecorator } = form
    const [pageNo, setPageNo] = useState(1)
    const [pageSize, setpageSize] = useState(10)
    const [operatorList, setOperatorList] = useState([])    // 运营商列表
    const [record, setRecord] = useState([])    // 索引数组
    const [total, setTotal] = useState('')
    // 表单查询
    const handleSearch = e => {
        e.preventDefault()
        form.validateFields((err, values) => {
            getOperatorLists(values.id)
        })
    }
    // 表单清空
    const handleReset = e => {
        form.resetFields();
    }
    // 查询条件
    const getFields = () => {
        return (
            <Col span={8}>
                <Form.Item label={`运营商名称`}>
                    {getFieldDecorator(`id`, {})
                        (<Input />)}
                </Form.Item>
            </Col>
        )
    }
    // 按钮处理
    const handleBtn = type => {
        // 跳转到 addOperator 页面
        router.push('/supplier/addOperator')
    }
    // 获取运营商列表
    const getOperatorLists = async (operatorName = '', pageNo = 1) => {
        let params = {
            pageNo,
            pageSize,
            operatorName
        }
        let res = await getOperatorList(params)
        if (res.code == 0) {
            // 赋值编号
            res.data.forEach((item, index) => {
                item.index = index + 1
            })
            await setOperatorList(res.data)
            await setTotal(res.iTotalDisplayRecords)
        } else {
            alert(res.msg)
        }
    }

    useEffect(() => {
        getOperatorLists()
    }, [])

    const pagination = {
        total: parseInt(total),
        onChange(page) {
            getOperatorLists(null, page)
        }
    }

    return (
        <PageHeaderWrapper>
            <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
            <RenderButtom click={handleBtn} />
            <Table
                columns={columns}
                dataSource={operatorList}
                rowKey={record => record.id}
                pagination={pagination}
            />
        </PageHeaderWrapper>
    )
}

export default Form.create()(Operator)
